<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style>
			*{
				margin:0;
				padding:0;
				box-sizing: border-box;
			}
			.banner_container {
				position: relative;
				margin: 100px;
				width: 400px;
				height: 250px;
				/* 超出隐藏 */
				overflow: hidden;
			}
			.img_box{
				position: absolute;
				/* left:400px; */
				left:0;
				top:0;
				transform:translateX(-400px)
			}
			.img_box li {
				float: left;
				list-style: none;
			}
			.img_box li img {
				width: 400px;
			}
			/* 小圆点 */
			.sel_box {
				position: absolute;
				bottom: 15px;
				left: 50%;
				transform: translateX(-50%);
			}
			.sel_box li {
				list-style: none;
			}
		</style>
	</head>
	<body>
		<div class="banner_container">
			<!-- 图片轮播 -->
			<ul class="img_box">
				<li><img src="./images/4.png" alt=""></li>
				<li><img src="./images/1.png" alt=""></li>
				<li><img src="./images/2.png" alt=""></li>
				<li><img src="./images/3.png" alt=""></li>
				<li><img src="./images/4.png" alt=""></li>
				<li><img src="./images/1.png" alt=""></li>
			</ul>
			<!-- 小圆点 -->
			<ul class="sel_box">
				<li data-index="1"></li>
				<li data-index="2"></li>
				<li data-index="3"></li>
				<li data-index="4"></li>
			</ul>
			<!-- 左箭头 -->
			<div class="btn_left">
			&lt;
			</div>
			<!-- 右箭头 -->
			<div class="bnt_right">
			&gt;
			</div>
		</div>
		<script>
			
		</script>
	</body>
</html>
